import React, { useState } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import { Button, Tabs, message } from 'antd';
import type { ProDescriptionsItemProps } from '@ant-design/pro-descriptions';
import ProDescriptions from '@ant-design/pro-descriptions';
import type { ProColumns } from '@ant-design/pro-table';
import ProTable, { TableDropdown } from '@ant-design/pro-table';
import request from 'umi-request';
import ProCard from '@ant-design/pro-card';
import { selectMenus } from '@/services/umi-demo/menu';

const Index: React.FC = () => {
  const [type, setType] = useState('table');
  const columns: ProColumns<API.MenuDataItem>[] = [
    {
      title: '序号',
      dataIndex: 'index',
      width: 64,
      valueType: 'indexBorder',
      search: false,
    },
    {
      title: 'ID',
      dataIndex: 'id',
      formItemProps: {
        rules: [
          {
            required: true,
          },
        ],
      },
    },
    {
      title: '路由名称',
      dataIndex: 'name',
      formItemProps: {
        rules: [
          {
            required: true,
          },
        ],
      },
    },
    {
      title: '路由',
      dataIndex: 'path',
      formItemProps: {
        rules: [
          {
            required: true,
          },
        ],
      },
    },
    {
      title: '路由图标',
      dataIndex: 'icon',
      search: false,
      formItemProps: {
        rules: [
          {
            required: true,
          },
        ],
      },
    },
    {
      title: '排位',
      dataIndex: 'sort',
      formItemProps: {
        rules: [
          {
            required: true,
            type: 'number',
          },
        ],
      },
    },
    {
      title: '父级ID',
      dataIndex: 'parentId',
      formItemProps: {
        rules: [
          {
            required: true,
            type: 'string',
          },
        ],
      },
    },
    {
      title: '状态',
      dataIndex: 'valid',
      valueEnum: {
        true: {
          text: '有效',
          status: 'Success',
        },
        false: {
          text: '无效',
          status: 'Error',
        },
      },
      formItemProps: {
        required: true,
        rules: [
          () => ({
            validator(_, value) {
              if (value === undefined) {
                return Promise.reject('${label} 不能为空!');
              }
              return Promise.resolve();
            },
          }),
        ],
      },
    },
    {
      title: '创建日期',
      dataIndex: 'createDate',
      valueType: 'dateTime',
      hideInForm: true,
    },
    {
      title: '更新日期',
      dataIndex: 'updateDate',
      valueType: 'dateTime',
      hideInForm: true,
    },
    {
      title: '操作',
      valueType: 'option',
      render: (text, row) => [
        <TableDropdown
          key="more"
          onSelect={(key) => message.info(key)}
          menus={[
            { key: 'copy', name: '复制' },
            { key: 'edit', name: '编辑' },
            { key: 'delete', name: '删除' },
          ]}
        />,
      ],
    },
  ];
  const validateMessages = {
    required: '${label} 不能为空!',
    types: {
      number: '${label} 请输入数字!',
    },
    valid: {
      type: 'boolean',
      require: true,
      validator: (rule: any, value: boolean) => {
        if (value === false) return true;
        return value;
      },
    },
  };

  const InsertButton = () => {
    return (
      <Button
        key="3"
        type="primary"
        onClick={() => {
          setType('form');
        }}
      >
        <PlusOutlined />
        新建
      </Button>
    );
  };

  const onFinish = (values: any) => {
    message.info(values);
  };

  return (
    <ProCard>
      <Tabs activeKey={type} onChange={(e) => setType(e)}>
        <Tabs.TabPane tab="查询" key="table" />
        <Tabs.TabPane tab="新增/编辑" key="form" />
        <Tabs.TabPane tab="明细" key="descriptions" />
      </Tabs>
      {['table', 'form'].includes(type) && (
        <ProTable<API.MenuDataItem>
          columns={columns}
          type={type as 'table'}
          pagination={{
            current: 1,
            pageSize: 10,
          }}
          rowKey="id"
          dateFormatter="string"
          headerTitle=""
          toolBarRender={() => [<InsertButton />]}
          form={{
            validateMessages: validateMessages,
            onFinish: async (values) => {
              onFinish(values);
            },
          }}
          request={async (params, _, filter) => {
            console.log(filter);
            const msg = await selectMenus({
              page: params.current,
              limit: params.pageSize,
            });
            return msg;
          }}
        />
      )}
      {type === 'descriptions' && (
        <ProDescriptions
          style={{
            background: '#fff',
          }}
          columns={columns as ProDescriptionsItemProps<API.MenuDataItem>[]}
        />
      )}
    </ProCard>
  );
};

export default Index;
